<template>
  <div class="app-container">
    <a-form ref="form" :model="form" label-width="110px">
      <a-form-item
        :label="$t('地图定位')"
        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
        :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
      >
        <a-input v-model="word" :placeholder="$t('搜索')"></a-input>
        <baidu-map :center="center" :zoom="zoom" @click="getClickInfo" @ready="mapReady">
          <bm-view style="width: 100%; height: 500px"></bm-view>
          <bm-local-search :keyword="word" :auto-viewport="true" @infohtmlset="infohtmlset"></bm-local-search>
          <!-- 缩放控件 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <!-- 定位控件 -->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_LEFT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <!-- 覆盖物 -->
          <bm-marker v-if="position.lng" :position="position" :dragging="move" @dragend="mkDragend"></bm-marker>
        </baidu-map>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'JMap',
  props: {
    city: {
      type: Array,
      default: '',
      required: false,
    },
    centerPoint: {
      type: String,
      default: '',
      required: false,
    },
    move: {
      type: Boolean,
      default: true,
      required: false,
    },
    keyword: {
      type: String,
      default: '',
      required: false,
    },
  },
  data() {
    return {
      myGeo: {}, //逆地址解析实例
      form: this.$form.createForm(this),
      zoom: 11, //地图大小级别
      center: this.$t('石家庄'), //地图中心点
      position: {}, //覆盖物位置
      province: '', //省
      city2: '', //市
      area: '', //区
      address: '', //覆盖物地址
      word: ''
    }
  },
  watch: {
    keyword(){
      this.word=this.keyword
    },
    /* city() {
      setTimeout(() => {
        if (this.city.length > 1) {
          this.center = this.city[1]
        }
      }, 1000)
    },
    centerPoint() {
      let that = this
      setTimeout(() => {
        if (that.centerPoint) {
          let point = {
            lng: parseFloat(that.centerPoint.split(',')[0]),
            lat: parseFloat(that.centerPoint.split(',')[1]),
          }
          that.center = point
          that.position = point
          //that.zoom = 19;
        } else {
          that.position = {}
          let myCity = new BMap.LocalCity()
          myCity.get(function (result) {
            that.center = result.name
            //that.zoom = 11;
          })
        }
      }, 1500)
    }, */
  },
  methods: {
    mapReady({ BMap, map }) {
      // 获取逆解析方法实例
      this.myGeo = new BMap.Geocoder()
      /* if (this.city.length > 1) {
        this.center = this.city[1];
      }
      if (this.centerPoint) {
        let point = {
          lng: parseFloat(this.centerPoint.split(',')[0]),
          lat: parseFloat(this.centerPoint.split(',')[1]),
        };
        this.center = point;
        this.position = point;
      } */
    },
    //点击地图
    getClickInfo(e) {
      if (!this.move) {
        return
      }
      this.getAddress(e.point)
      this.setValue()
    },
    //拖拽覆盖点
    mkDragend(e) {
      this.getAddress(e.point)
      this.setValue()
    },
    //逆地址解析
    getAddress(point) {
      const that = this
      this.myGeo.getLocation(point, function (result) {
        if(result){
          that.position = point
          that.province = result.addressComponents.province
          that.city2 = result.addressComponents.city
          that.area = result.addressComponents.district
          that.address =
            result.surroundingPois.length > 0
              ? result.surroundingPois[0].address + result.surroundingPois[0].title
              : result.address
          that.setValue()
        }else{
          console.error('Geocoding failed');
        }
      })
    },
    //选择检索结果
    infohtmlset(e) {
      this.position = e.point
      this.province = e.province
      this.city2 = e.city
      this.area = e.address.substring(e.city.length, e.address.indexOf('区') + 1)
      this.address = e.address + e.title
      this.setValue()
    },
    //返回表单数据
    setValue() {
      const obj = {
        lng: this.position.lng,
        lat: this.position.lat,
        address: this.address,
        province: this.province,
        city: this.city2,
        area: this.area,
      }
      this.$emit('getMapValue', obj)
    },
  },
}
</script>

<style lang="scss" scoped>
.autoAddressClass {
  li {
    .mgr10 {
      margin-right: 10px;
    }
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}
</style>
